import React from 'react';
import { Button, Drawer, Form, Input, Select, Row, Col } from 'antd';
import { inject, observer } from 'mobx-react';

function OrgDrawer({ store }) {
  const formRef = React.createRef();

  const onClose = () => {
    store.closeOrgDrawer();
  };

  /**
   * 回调保存机构信息函数
   * @param e
   */
  const onConfirm = async () => {
    try {
      let values = await formRef.current.validateFields();
      store.saveOrg(values);
    } catch (e) {
      console.log(e);
    }
  };

  let { editData, visible, loading } = store.orgDrawerData;
  const oneItemLayout = { labelCol: { span: 3 }, wrapperCol: { span: 21 } };
  const layout = { labelCol: { span: 6 }, wrapperCol: { span: 18 } };
  if (!editData.type) {
    editData.type = store.orgType[0] ? store.orgType[0].code : null;
  }
  if (editData.status == null) {
    editData.status = true;
  }
  let title = editData.id ? '编辑组织机构' : '新增组织机构';
  return (
    <Drawer title={title} visible={visible} width={780} closable={false}
            bodyStyle={{ padding: '15px 15px 60px 15px' }}
            onClose={onClose} destroyOnClose={true}>
      <Form ref={formRef} {...layout} initialValues={editData}>
        <Form.Item name='id' noStyle={true}> <Input type="hidden"/> </Form.Item>
        <Form.Item name='parentId' noStyle={true}> <Input type="hidden"/> </Form.Item>
        <Row>
          <Col span={12}>
            <Form.Item label="机构名称" name='name' rules={[{ required: true, message: '请输入机构名称！' }]}>
              <Input autoComplete="off"/>
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item label="机构全称" name='fullName'>
              <Input autoComplete="off"/>
            </Form.Item>
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <Form.Item label="机构代码" name='code'>
              <Input autoComplete="off"/>
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item label="机构类型" name='type' rules={[{ required: true, message: '请选择机构类型' }]}>
              <Select>
                {store.orgType.map(function(item, i) {
                  if (!item.code) return;
                  return <Select.Option key={item.code} value={item.code}>{item.name}</Select.Option>;
                })}
              </Select>
            </Form.Item>
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <Form.Item label="邮政编码" name='zipCode'>
              <Input autoComplete="off"/>
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item label="联系电话" name='tel'>
              <Input autoComplete="off"/>
            </Form.Item>
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <Form.Item label="传真" name='tax'>
              <Input autoComplete="off"/>
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item label="email" name='email' rules={[{ type: 'email', message: '请输入有效格式的电子邮箱!' }]}>
              <Input autoComplete="off"/>
            </Form.Item>
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <Form.Item label="联系人" name='contacter'>
              <Input autoComplete="off"/>
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item label="当前状态" name='status' rules={[{ required: true, message: '请选择当前状态' }]}>
              <Select>
                <Select.Option value={true}>启用</Select.Option>
                <Select.Option value={false}>停用</Select.Option>
              </Select>
            </Form.Item>
          </Col>
        </Row>
        <Row>
          <Col span={24}>
            <Form.Item {...oneItemLayout} label="通讯地址" name='addr'>
              <Input autoComplete="off"/>
            </Form.Item>
          </Col>
        </Row>
        <Row>
          <Col span={24}>
            <Form.Item {...oneItemLayout} label="机构描述" name='remark'>
              <Input.TextArea autoComplete="off"/>
            </Form.Item>
          </Col>
        </Row>
      </Form>
      <div className='footer'>
        <Button onClick={onClose} style={{ marginRight: 8 }}>返回</Button>
        <Button loading={loading} onClick={onConfirm} type="primary">保存</Button>
      </div>
    </Drawer>);
}

export default inject('store')(observer(OrgDrawer));
